<template>
  <div class="main_box" style="padding: 10px;">
    <div class="add_wrap">
      <div class="tit">
        <h2>挂号信息</h2>
        <el-button plain size="small" type="success" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
      </div>
      <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item label="挂号医院" prop="institutionId">
            <el-select
              v-model="dataForm.institutionId"
              clearable
              reserve-keyword
              :loading="loadingIns"
              placeholder="请选择挂号医院"
              @change="institutionChange"
            >
              <el-option
                v-for="item in pickInstitutionList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="挂号科室"
            prop="insOfficeId"
          >
            <el-select
              v-model="dataForm.insOfficeId"
              clearable
              reserve-keyword
              placeholder="请选择挂号科室"
            >
              <el-option
                v-for="item in pickInsOfficeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="医生姓名" prop="doctorName">
            <el-input v-model="dataForm.doctorName"></el-input>
          </el-form-item>
          <el-form-item label="挂号日期" prop="referralDate">
            <el-date-picker v-model="dataForm.referralDate" type="datetime"
                            :picker-options="pickerBeginDateBefore"
                            :default-value="timeDefaultShow"
                            value-format="yyyy-MM-dd"  placeholder="请选择挂号日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="挂号备注" prop="remark">
            <el-input type="textarea" v-model="dataForm.remark"></el-input>
          </el-form-item>
        </el-row>
        
        <div class="tit">
          <h2>患者信息</h2>
        </div>
        <el-row>
          <el-form-item label="患者姓名" prop="patientName">
            <el-input v-model="dataForm.patientName"  @keydown.native="keydown($event)"></el-input>
          </el-form-item>
          <el-form-item label="患者身份证" prop="patientCard">
            <el-input v-model="dataForm.patientCard"></el-input>
          </el-form-item>
          <el-form-item label="患者性别" prop="patientSex">
            <el-radio-group v-model="dataForm.patientSex">
              <el-radio :label="item.value" :key="item.value" v-for="item in sexLabels">{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="患者年龄" prop="patientAge">
            <el-input v-model="dataForm.patientAge"></el-input>
          </el-form-item>
          <el-form-item label="患者电话" prop="patientPhone">
            <el-input v-model="dataForm.patientPhone"></el-input>
          </el-form-item>
          <el-form-item label="患者病史" prop="patientInfo">
            <el-input type="textarea" v-model="dataForm.patientInfo"></el-input>
          </el-form-item>

        </el-row>

        <el-row>
          <el-form-item>
            <el-button plain type="primary" @click="sureReferralClick">保 存</el-button>
            <el-button @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </div>

  </div>
</template>

<script>
import * as message from '@/constants/message';
import { mapGetters, mapActions } from 'vuex';
import ReferralApi from "@/api/referral/referral";
import InstitutionApi from "@/api/institution/institution";
import OfficeApi from "@/api/institution/office";
export default {
  data () {
    return {
      sexLabels: [
        { label: "男", value: 1 },
        { label: "女", value: 2 }
      ],
      projectIdsLimit: 10,
      loadingIns: false,
      loadingUpload: false,
      fullscreenLoading: false,
      isCenter: true,
      disabled: false,
      dialogVisible: false,
      dataForm: {
        referralId: '',
        patientName: '',
        patientSex: '',
        patientAge: '',
        patientPhone: '',
        patientCard: '',
        patientInfo: '',
        institutionId: '',
        insOfficeId: '',
        doctorName: '',
        referralDate: '',
        referralTime: '',
        remark: ''
      },
      pickerBeginDateBefore:{
        disabledDate(time) {
          return time.getTime() < Date.now();
        }
      },
      pickInstitutionList: [],
      pickInsOfficeList: [],
      referralItemList: [],
      selectItemList: [],
      timeDefaultShow:'',
      roleRules: {
        referralDate: [
          {
            required: true,
            message: '请输入挂号日期',
            trigger: 'blur'
          }
        ],
        patientName: [
          {
            required: true,
            message: '请输入患者姓名',
            trigger: 'blur'
          }
        ],
        patientPhone: [
          {
            required: true,
            message: '请输入患者电话',
            trigger: 'blur'
          }
        ],
        institutionId: [
          {
            required: true,
            message: '请选择挂号医院',
            trigger: 'change'
          }
        ],
        insOfficeId: [
          {
            required: true,
            message: '请选择挂号科室',
            trigger: 'change'
          }
        ],
        remark: [
          { max: 200, message: '长度不超过200个字', trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    ...mapGetters({
      openTabs: 'getOpenTabs'
    }),
    ...mapActions({
      setOpenTabs: 'setOpenTabs',
      setActiveIndexPath: 'setActiveIndexPath',
      setDeleteTabs: 'setDeleteTabs',
      replaceOpenTab: 'replaceOpenTab'
    }),
    init () {
      this.$Utils.clearData(this.dataForm)
      this.listInstitution()

      if (this.$route.query.id) {
        this.dataForm.referralId = this.$route.query.id
        this.getData()
      }
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },
    sureReferralClick () {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm(
            message.MSG_CONFIRM_SAVE_ALTER,
            message.TITLE_PROMPT,
            {}
          ).then(() => {
            if (this.dataForm.referralId){
              this.editData();
            }else{
              this.addData();
            }
          })
        }
      })
    },
    listInstitution () {
      let _this = this
      _this.loadingIns = true
      let cond = {}
      InstitutionApi.selectInsByUser(cond)
        .then(res => {
          setTimeout(() => {
            _this.loadingIns = false
            _this.pickInstitutionList = res.data.map(item => {
              return {
                value: item.institutionId,
                label: item.institutionName
              }
            })
          }, 200)
        })
        .catch(error => {
          _this.pickInstitutionList = []
          console.error(error)
        })
    },
    institutionChange () {
      let _this = this
      _this.dataForm.insOfficeId = "";
      _this.listInsOffice(_this.dataForm.institutionId)
    },
    listInsOffice (institutionId) {
      let _this = this
      _this.pickInsOfficeList = [];
      let cond = {
        institutionId: institutionId
      }
      OfficeApi.getOfficeNames(cond)
        .then(res => {
          setTimeout(() => {
            _this.pickInsOfficeList = res.data.map(item => {
              return {
                value: item.officeId,
                label: item.officeName
              }
            })
          }, 200)
        })
        .catch(error => {
          _this.pickInsOfficeList = []
          console.error(error)
        })
    },
    addData () {
      let _this = this
      let dataFormData = {
        patientName: _this.dataForm.patientName,
        patientSex: _this.dataForm.patientSex,
        patientAge: _this.dataForm.patientAge,
        patientCard: _this.dataForm.patientCard,
        patientPhone: _this.dataForm.patientPhone,
        patientInfo: _this.dataForm.patientInfo,
        institutionId: _this.dataForm.institutionId,
        insOfficeId: _this.dataForm.insOfficeId,
        doctorName: _this.dataForm.doctorName,
        referralDate: _this.dataForm.referralDate,
        referralTime: _this.dataForm.referralTime,
        remark: _this.dataForm.remark
      }
      ReferralApi.addReferral(dataFormData)
        .then(data => {
          this.$Utils.notifySuccess()
          this.returnList()
        })
    },
    editData() {
      ReferralApi.editReferral(this.dataForm)
        .then(data => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
    },
    getData () {
      ReferralApi.getReferralInfo({
        referralId: this.dataForm.referralId
      }).then(res => {
        this.$Utils.bindingBean(this.dataForm, res.data)
        if (res.data.institutionId){
          this.dataForm.institutionId = parseInt(res.data.institutionId);
          this.listInsOffice(this.dataForm.institutionId)
        }
        if (res.data.insOfficeId){
          this.dataForm.insOfficeId = parseInt(res.data.insOfficeId);
        }
        if (res.data.patientSex){
          this.dataForm.patientSex = parseInt(res.data.patientSex);
        }
      })
    },
    returnList () {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/referral/referralManagement' })
    }
  },
  mounted () {
    this.timeDefaultShow = new Date()
    this.dataForm.patientSex = 1
    this.init()
  }
}
</script>
<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
